<template>
  <van-form @submit="onSubmit" @failed="onFailed">
    <van-field
      v-model="form.phone"
      name="phone"
      label="手机号"
      left-icon="phone-o"
      clearable
      center
      placeholder="手机号"
      :rules="[
        { required: true, message: '请输入手机号' },
        { pattern: reg.phone, message: '请输入正确的手机号' },
      ]"
    >
    </van-field>

    <van-field
      v-model="form.captcha"
      left-icon="qr"
      name="captcha"
      center
      clearable
      label="验证码"
      placeholder="验证码"
      :rules="[
        { required: true, message: '请输入验证码' },
        { pattern: reg.code, message: '请输入四位数字验证码' },
      ]"
    >
      <template #button>
        <van-button
          style="
            background: none;
            color: #ff80aa;
            border:none
            border-left: 2px solid #ff80aa;
          "
          v-if="toggle"
          size="small"
          type="primary"
          :disabled="disabled"
          @click="startSend"
          >发送验证码</van-button
        >
        <van-button v-else disabled size="small" type="default"
          >等待 {{ backtime }} S</van-button
        >
      </template>
    </van-field>
    <div style="margin: 16px 0" class="links">
      <router-link :to="{ name: 'register' }" class="aitem color1"
        >没有账号,请注册</router-link
      >
      <router-link :to="{ name: 'forgetpwd' }" class="aitem color2"
        >找回密码</router-link
      >
    </div>
    <div style="margin: 16px 0">
      <van-button block type="primary" native-type="submit">登录</van-button>
      <van-button class="mt20" block type="danger" native-type="reset"
        >重置</van-button
      >
    </div>
  </van-form>
</template>

<script>
var timer = null;
export default {
  data() {
    return {
      form: {},
      backtime: 180,
      toggle: true,
    };
  },
  methods: {
    async onSubmit(value) {
      // 先判断是否已经被注册
      let res = await this.$ajax.findUser({
        phone: value.phone,
      });
      // console.log(res);
      if (res.length > 0) {
        // 校验验证码
        let result = await this.$ajax.verifyCaptcha(value);
        console.log(result);
        if (result.code == 200) {
          // 登录成功
          this.ShowSuccess("校验成功");
          localStorage.setItem("phone", value.phone); // 存储手机号
          this.$router.push({ name: "mine" });
          this.changeUserInfo(res[0]); // 存储全局的用户信息
        }
      } else {
        this.ShowFailMsg("手机号未注册,请先注册");
      }
    },
    onFailed() {
      this.ShowFailMsg("请输入有效的登录信息");
    },
    startSend() {
      // 发送后执行倒计时函数
      this.timeDown();

      this.$ajax
        .sendCaptcha({
          phone: this.form.phone,
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.ShowSuccess("发送成功");
          }
        });
    },
    // 验证码倒计时
    timeDown() {
      this.toggle = false;
      this.backtime--;
      timer = setInterval(() => {
        if (this.backtime > 0) {
          this.toggle = false;
          this.backtime--;
        } else {
          clearInterval(timer);
          timer = null;
          this.toggle = true;
          this.backtime = 60;
        }
      }, 1000);
    },
  },
  computed: {
    disabled() {
      // 取反
      return !this.reg.phone.test(this.form.phone);
    },
  },
  mounted() {
    if (this.$route.query.phone) {
      this.form = { ...this.form, phone: this.$route.query.phone };
    } else {
      this.form = { ...this.form, phone: localStorage.getItem("phone") };
    }
  },
  destroyed() {
    // 离开页面清除定时器
    clearInterval(timer);
    timer = null;
  },
};
</script>

<style lang="scss" scoped>
</style>